<div>
  <ul class="row">
    <li class="col-sm-12 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold host-item-key">ID:</span>
        <span class="ml auto-hide host-item-value">
          {{ host.id }}
        </span>
      </div>
    </li>
    <li class="col-sm-6 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold host-item-key">
          {{ 'nodes.detail.NUM_OF_CPUS' | translate }}:
        </span>
        <span class="ml auto-hide host-item-value">
          {{ host.cpus }}
        </span>
      </div>
    </li>
    <li class="col-sm-6 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold host-item-key">
          {{ 'nodes.detail.MEMORY' | translate }}:
        </span>
        <span class="ml auto-hide host-item-value">
          {{ host.memory }}
        </span>
      </div>
    </li>
    <li class="col-sm-6 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold host-item-key">
          {{ 'nodes.detail.OS' | translate }}:
        </span>
        <span class="ml auto-hide host-item-value">
          {{ host.os }}
        </span>
      </div>
    </li>
    <li class="col-sm-6 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold host-item-key">
          {{ 'nodes.detail.KERNEL_VERSION' | translate }}:
        </span>
        <span class="ml auto-hide host-item-value">
          {{ host.kernel }}
        </span>
      </div>
    </li>
    <li class="col-sm-6 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold host-item-key">
          {{ host.runtime | titlecase }}:&nbsp;{{
            'nodes.detail.VERSION' | translate
          }}
        </span>
        <span class="ml auto-hide host-item-value">
          {{ host.runtime_version }}
        </span>
      </div>
    </li>
    <li class="col-sm-6 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold host-item-key">
          {{ host.runtime | titlecase }}:&nbsp;{{
            'nodes.detail.API_VERSION' | translate
          }}
        </span>
        <span class="ml auto-hide host-item-value">
          {{ host.runtime_api_version }}
        </span>
      </div>
    </li>
    <li class="col-sm-6 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold host-item-key">
          {{ 'network.hostDetails.CONTAINERS' | translate }}:
        </span>
        <span class="ml auto-hide host-item-value">
          {{ host.containers }}
        </span>
      </div>
    </li>
    <li *ngIf="!!host.scan_summary?.scanned_at" class="col-sm-6 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold host-item-key"
          >{{ 'network.nodeDetails.SCANNED_AT' | translate }}:</span
        >
        <span class="ml mr-lg auto-hide host-item-key">
          {{ host.scan_summary.scanned_at | date: 'MMM dd, y HH:mm:ss' }}
        </span>
      </div>
    </li>
    <li class="col-sm-6 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold host-item-key"
          >{{ 'group.gridHeader.VULNERABILITIES' | translate }}:</span
        >
        <div class="d-inline">
          <span
            *ngIf="host.scan_summary?.high"
            class="badge badge-danger mr-sm">
            {{ host.scan_summary.high }}</span
          >
          <span *ngIf="host.scan_summary?.medium" class="badge badge-warning">
            {{ host.scan_summary.medium }}</span
          >
          <a
            *ngIf="host.scan_summary?.high || host.scan_summary?.medium"
            [routerLink]="['/hosts']"
            style="display: table-cell; font-size: 11px; line-height: 15px">
            <em class="eos-icons icon-12 ml-2">launch</em>
          </a>

          <label
            *ngIf="
              host.scan_summary?.scanned_at &&
              host.scan_summary?.high === 0 &&
              host.scan_summary?.medium === 0
            "
            class="label label-success-tran">
            <em class="fa fa-smile-o mr-sm"></em> Clean
          </label>
        </div>
      </div>
    </li>
    <li *ngIf="host.interfaces" class="col-sm-12 p-2">
      <div class="mda-list-item-text pb-0 pt-sm">
        <div class="font-weight-bold text-muted">
          {{ 'containers.detail.NETWORK_INTERFACES' | translate }}:
        </div>
        <div
          *ngFor="let item of host.interfaces | keyvalue"
          class="row pl"
          style="width: 380px">
          <div class="col-sm-2 text-right pr-0 text-muted">
            {{ item.key }}
          </div>
          <div class="col-sm-1"></div>
          <div class="col-sm-9 pl0">
            <div *ngFor="let net of item.value">
              <div class="col-sm-12">
                <div class="col-sm-6 text-muted">
                  IP:{{ net.ip }}/{{ net.ip_prefix }}
                </div>
                <div *ngIf="net.gateway" class="col-sm-6 text-muted">
                  {{ 'general.GATEWAY' | translate }}:{{ net.gateway }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
